<template>
<div class="wrapper personalblog">
<!-- 左边博客记录模块     -->
    <div class="article hover-shadow ">
        <div class="articleSize">
            <div class="sorter">
                <img src="@/assets/images/upward.png" alt="img" v-if="thisCurrentPage>1" @click="upWard()">
            </div>
            
            <ul>
                <li  v-for="(item,index) in articles.rows" :key="index" >
                    <span class="atricleTitle" v-if="index < thisCurrentPage*15 && index >= (thisCurrentPage-1)*15">
                        <time>&nbsp;&nbsp;&nbsp;&nbsp;{{item.createdYear}}-{{item.createdMonth}}-{{item.createdDay}}</time>
                        &nbsp;&nbsp;&nbsp; 
                        <span @click="intoDetails(item)" class="click">{{item.title}}</span>
                        <span @click="removeBlog(item,index)" class="test" style="color:red">删除</span>
                        <!-- <span @click="intoEditor(item)" class="test" style="color:#919191">编辑</span> -->
                    </span>
                </li>
            </ul>
            <div class="sorter">
                <img src="@/assets/images/down.png" alt="img" v-if="thisCurrentPage*14<articles.count" @click="downWard()">
            </div>
            
        </div> 
    </div>
<!-- 右半模块 统一右移65px-->
    <div class="right">
        <!-- 头像卡模块 -->
        <div class="info  hover-shadow">
            <div class="author">
                <div class="avatar"><img :src="user.avatar" height="150px" alt=""></div>
                <p class="id">id：{{user.user_id}}</p>
                <p class="name">{{user.name}}</p>
                <div class="brief"><p>{{user.brief}}</p></div>
            </div>
            <div class="details">
                <a>
                    <p>文章</p>
                    <span>{{user.amount}}</span>
                </a>
                <a> 
                    <p>粉丝</p>
                    <span>{{user.fans}}</span>
                </a> 
                <a>
                    <p>关注</p>
                    <span>{{user.attention}}</span>  
                </a>   
            </div>
        </div>
        <!-- 公告模块 -->
        <div class="announcement  hover-shadow">
            <div class="announce">
                <div class="img" ><img src="@/assets/images/announcement.png" height="30px" alt=""></div>
                <div class="text"><span>消息</span></div>
                <a><p class="clear">正在施工...</p></a>
            </div>
        </div>
        <!-- 分类模块 -->
        <div class="classification  hover-shadow">
            <div class="classStyl">
                <div class="img"><img src="@/assets/images/classification.png" height="25px" alt=""></div>
                <div class="text"><span >分类</span></div><br><br>
                <p>正在施工...</p>
            </div>
        </div>
    </div> 
</div>
</template>

<script>
import Axios from 'axios'
import store from '@/store/index.js'
import { getUserArticles, removeArticle, getFans, getAttention } from '@/../api/api.js'
export default {
    name: 'Footer',
    data () {
        return {
            articles:{
                rows:[],
                count:null,
            },
            user: {
                avatar: store.state.user.user.avatar,
                user_id: store.state.user.user.user_id,
                name: store.state.user.user.name,
                brief: store.state.user.user.brief,
                amount: store.state.user.user.amount,
                fans:null,
                attention:null
            },
            thisCurrentPage:1,
            currentPage:1,
            pageSize:15

        }
    },
    created() {
        Axios.all([
            Axios.get(getUserArticles,{
                params: {
                    userId: store.state.user.user.user_id
                }
            }),
            Axios.get(getFans,{
                params: {
                    userId : store.state.user.user.user_id
                }
            }),
            Axios.get(getAttention,{
                params: {
                    userId : store.state.user.user.user_id
                }
            })    
        ])
        .then(Axios.spread((articles,fans,attention) => {
            if (articles.data.message == 'success') {
                this.articles.count = articles.data.data.count;
                this.articles.rows = articles.data.data.rows;
            }
            if (fans.data.message == 'success') {
                this.user.fans = fans.data.data.count;
            }
            if (attention.data.message == 'success') {
                this.user.attention = attention.data.data.count;
            }
        }))
        .catch(err =>{
            console.log(err);
            this.user.attention = 0;
            this.user.fans = 0;
        });
    },
    methods: {
        intoDetails(article) {
            store.commit('updateArticle',article);
            this.$router.push({
                path: "/details",
                query: {
                    id: article.id,
                }
            });
        },
        removeBlog(article,tip) {
            Axios.get(removeArticle,{
                params:{
                    id: article.id,
                    userId: article.user_id
                }
            })
            .then(Response => {
                if (Response.data.message == 'success') {
                    window.alert("删除成功！");
                    store.commit("downAmount");
                    this.articles.rows.splice(tip,1);
                    this.articles.count = Number(this.articles.count)-1;
                }
            })
        },
        intoEditor(article) {
            store.commit('updateEditorArticle',article);
            this.$router.push({
                path:'editor'
            });
        },
        upWard() {
            this.thisCurrentPage = this.thisCurrentPage-1;
        },
        downWard() {
            if (this.thisCurrentPage < this.currentPage) {
                this.thisCurrentPage += 1;
            } else {
                Axios.get(getUserArticles,{
                    params: {
                        userId: store.state.user.user.user_id,
                        currentPage: this.currentPage+1,
                        pageSize: this.pageSize
                    }
                })
                .then(Response => {
                    if (Response.data.message == 'success') {
                        this.articles.count = Response.data.data.count;
                        this.articles.rows = this.articles.rows.concat(Response.data.data.rows);
                        this.thisCurrentPage += 1;
                        this.currentPage += 1;
                    }
                })
                .catch(err => {
                    console.log(err);
                })
            }
        }
    },
}
</script>


<style lang="stylus" scoped>
.personalblog
    display flex
    margin 50px auto

.sorter 
    margin  0% 48%
    width 30px
    height 30px
    img
        width 30px
        height 30px
   
    :hover
        cursor pointer

//文章模块
.article
    height 820px
    width 900px
    .articleSize
        padding 40px 50px
        line-height 45px
        ul
            list-style none
            li 
                :hover
                    .test
                        display block
.atricleTitle
    display: -webkit-box
    -webkit-box-orient: vertical
    -webkit-line-clamp: 1
    overflow: hidden
    margin 0px
.click
    width auto
    height auto
    cursor pointer
.test  
    float right
    display none
    margin 0px 10px
    cursor pointer

//右边模块
.right
    margin-left 65px

//作者头像模块    
.info
    width 300px
    height 360px
    .author
        padding 20px 20px
        height 250px 
        text-align center
        .avatar
            width 150px
            height 150px
            border-radius 50% 
            display inline-block
            overflow hidden
        .id
            font-size 1px
            color #a39e8e
            // padding-top 8px
        .brief
            text-align center
            width 260px
            p   
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
        .name
            font-size 28px
            color #a39e9e
            
    .details
        width 260px
        display flex
        justify-content flex-start
        padding 32px 35px
        text-align center
        p
            width 80px  
//公告模块              
.announcement
    width 300px
    height 100px
    margin 30px 0 
    vertical-align center
    display block
    .announce
        padding 20px  20px
.img 
    float left 
    display inline 
    margin-left 5px  
.text
    float left 
    display inline 
    margin 6px 15px
.clear
    clear both
//分类模块     
.classification
    width 300px
    height 300px
    .classStyl
        padding 20px 20px   
        ul 
            padding-top 35px
</style>




